<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        body {
            font-family: "simsun";
        }

        .comment {
            font-size: 40px;
            color: #ff1100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="./jquery-1.11.1.js"></script>
    <script src="./jquery.color.js"></script>
    <script>
        $(function () {
            $('li').on({
                mouseenter: function () {
                    $(this).text('★').prevAll().text('★')
                    $(this).nextAll().text('☆')
                },

                click: function () {
                    // $(this).prevAll().addClass('color')
                    $(this).addClass('color').siblings().removeAttr('class')

                },

                mouseout: function () {
                    if ($('.color').length == 0) {
                        $('li').text('☆')
                    } else {
                        $('.color').text('★').prevAll().text('★')
                        $('.color').nextAll().text('☆')
                        //baocun 
                    }
                }
            })

        })

    </script>
</head>

<body>


    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>


</body>

</html>